/**
 * Add max-width & max-height to <iframe> elements, depending on their width & height props.
 *
 * @since Twenty Twenty-One 1.0
 *
 * @return {void}
 */
function twentytwentyoneResponsiveEmbeds() {
	var proportion, parentWidth;

	// Loop iframe elements.
	document.querySelectorAll('iframe').forEach(function (iframe) {
		// Only continue if the iframe has a width & height defined.
		if (iframe.width && iframe.height) {
			// Calculate the proportion/ratio based on the width & height.
			proportion = parseFloat(iframe.width) / parseFloat(iframe.height)
			// Get the parent element's width.
			parentWidth = parseFloat(window.getComputedStyle(iframe.parentElement, null).width.replace('px', ''))
			// Set the max-width & height.
			iframe.style.maxWidth = '100%';
			iframe.style.maxHeight = Math.round(parentWidth / proportion).toString() + 'px'
		}
	})
}

// Run on initial load.
twentytwentyoneResponsiveEmbeds()

// Run on resize.
window.onresize = twentytwentyoneResponsiveEmbeds;

let
	// 可视高度
	clientHeight = document.documentElement.clientHeight,
	// 可视宽度
	clientWidth = document.documentElement.clientWidth,
	// TOC
	tocCurrentState

window.addEventListener('resize', () => {
	clientHeight = document.documentElement.clientHeight
	clientWidth = document.documentElement.clientWidth
})

const
	/**
	 * 文章代码高亮
	 */
	codeHighlight = () => {
		hljs.highlightAll()
		hljs.initHighlighting()
		hljs.initCopyButtonOnLoad()
	},
	/**
	 * 前端文章目录 - js
	 * 
	 * @author 阿锋
	 * @link https://feng.pub
	 * @version 0.1.0
	 */
	contentToc = () => {
		// 配置项
		const
			// 获取内容的标题级别
			levelTOC = 'h1, h2, h3, h4',
			// 获取到标题个数大于该数时才显示文章目录
			toShowNum = 3,
			// 文章目录块的高度偏移量（可视窗口高度减去该高度为文章目录块的高度）
			tocOffsetHeight = 235,
			// 滚动顶部偏移（滚动窗口时内容标题顶部偏移高度，防止顶部浮动导航遮挡标题）
			topTOCOffsetHeight = 65,
			// 关闭文章菜单后，圆球的高度（根据css样式设定）
			lessHeight = 40,
			// 菜单默认状态（1：打开状态；0：关闭状态）
			defaultState = 1,
			// 移动端菜单默认状态
			mobileDefaultState = 0,
			// 当前状态
			initTOCState = (document.documentElement.clientWidth <= 992) ? mobileDefaultState : defaultState,
			// 获取文章内容元素
			entryContent = document.querySelector('.entry-content')

		// 当前状态
		tocCurrentState = initTOCState

		if (!entryContent) return

		// 获取元素中H1、H2、H3、H4、H5、H6
		const levelTOCStr = levelTOC.split(",").map(item => '.entry-content>' + item).join(',')

		const contentHeadings = entryContent.querySelectorAll(levelTOCStr)
		if (contentHeadings.length < toShowNum) return

		// TOC
		const
			box = document.createElement('div'),
			btnBox = document.createElement('a'),
			indexBox = document.createElement('div'),
			titleBox = document.createElement('h6'),
			closeBox = document.createElement('a'),
			listBox = document.createElement('ul'),
			action = {
				tocLess: () => {
					tocCurrentState = 0
					box.classList.add('less')
					box.classList.remove('spread')
				},
				tocSpread: () => {
					tocCurrentState = 1
					box.classList.add('spread')
					box.classList.remove('less')
				}
			}

		box.classList.add('content-toc')

		btnBox.classList.add('button-box', 'text')
		btnBox.innerHTML = "目录"
		box.appendChild(btnBox)

		indexBox.classList.add('index-box')
		box.appendChild(indexBox)
		titleBox.innerHTML = "文档目录"
		indexBox.appendChild(titleBox)

		closeBox.classList.add('close-box')
		closeBox.innerHTML = '关闭'
		indexBox.appendChild(closeBox)

		contentHeadings.forEach((e, k) => {
			const liBox = document.createElement('li')
			liBox.className = 'level_' + e.tagName
			liBox.innerText = e.textContent
			liBox.dataset.toc = k
			listBox.appendChild(liBox)
		})
		indexBox.appendChild(listBox)

		initTOCState ? action.tocSpread() : action.tocLess()

		closeBox.addEventListener('click', () => {
			action.tocLess()
		})

		btnBox.addEventListener('click', () => {
			tocCurrentState ? action.tocLess() : action.tocSpread()
		})

		// 点击文章目录事件
		listBox.addEventListener('click', e => {
			if (e.target.tagName == 'LI') {
				const activeToc = listBox.querySelector('.active')
				if (activeToc) activeToc.classList.remove('active')
				e.target.classList.add('active')
				const TOCIndex = e.target.dataset.toc
				window.scrollTo({ top: contentHeadings[TOCIndex].offsetTop - topTOCOffsetHeight, left: 0, behavior: "smooth" })
			}
		})

		// 监听页面滚动
		document.addEventListener('scroll', () => {
			const
				scrollTop = document.documentElement.scrollTop,
				activeToc = listBox.querySelector('.active')

			if (scrollTop < entryContent.offsetTop || scrollTop > (entryContent.offsetHeight + entryContent.offsetTop)) {
				if (activeToc) activeToc.classList.remove('active')
			} else {
				const contentTOCLis = listBox.querySelectorAll('li')
				contentHeadings.forEach((e, k) => {
					if (scrollTop >= (e.offsetTop - topTOCOffsetHeight) && scrollTop < (contentHeadings[k + 1] ? contentHeadings[k + 1].offsetTop - topTOCOffsetHeight : entryContent.offsetHeight + entryContent.offsetTop)) {
						if (activeToc) activeToc.classList.remove('active')
						contentTOCLis[k].classList.add('active')
					}
				})
			}
		})

		return {
			box, action
		}
	},
	backToTop = () => {
		const
			upIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-rocket-fill" viewBox="0 0 16 16">  <path d="M10.175 1.991c.81 1.312 1.583 3.43 1.778 6.819l1.5 1.83A2.5 2.5 0 0 1 14 12.202V15.5a.5.5 0 0 1-.9.3l-1.125-1.5c-.166-.222-.42-.4-.752-.57-.214-.108-.414-.192-.627-.282l-.196-.083C9.7 13.793 8.85 14 8 14c-.85 0-1.7-.207-2.4-.635-.068.03-.133.057-.198.084-.211.089-.411.173-.625.281-.332.17-.586.348-.752.57L2.9 15.8a.5.5 0 0 1-.9-.3v-3.298a2.5 2.5 0 0 1 .548-1.562l.004-.005L4.049 8.81c.197-3.323.969-5.434 1.774-6.756.466-.767.94-1.262 1.31-1.57a3.67 3.67 0 0 1 .601-.41A.549.549 0 0 1 8 0c.101 0 .17.027.25.064.037.017.086.041.145.075.118.066.277.167.463.315.373.297.85.779 1.317 1.537ZM9.5 6c0-1.105-.672-2-1.5-2s-1.5.895-1.5 2S7.172 8 8 8s1.5-.895 1.5-2Z"/>  <path d="M8 14.5c.5 0 .999-.046 1.479-.139L8.4 15.8a.5.5 0 0 1-.8 0l-1.079-1.439c.48.093.98.139 1.479.139Z"/> </svg>',
			box = document.createElement('a')
		box.classList.add('back-to-top', 'button-box')
		box.innerHTML = upIcon
		box.addEventListener('click', () => {
			window.scrollTo({ top: 0, left: 0, behavior: "smooth" })
		})

		// 监听页面滚动
		document.addEventListener('scroll', () => {
			const scrollTop = document.documentElement.scrollTop
			scrollTop >= clientHeight * 0.57 ? box.classList.add('show') : box.classList.remove('show')
		})

		return box
	},
	switchStyle = () => {
		let currentStyle
		const
			darkIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon-fill" viewBox="0 0 16 16">  <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/> </svg>',
			lightIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sun-fill" viewBox="0 0 16 16">  <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/> </svg>',
			autoIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-display-fill" viewBox="0 0 16 16">  <path d="M6 12c0 .667-.083 1.167-.25 1.5H5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-.75c-.167-.333-.25-.833-.25-1.5h4c2 0 2-2 2-2V4c0-2-2-2-2-2H2C0 2 0 4 0 4v6c0 2 2 2 2 2h4z"/> </svg>',
			box = document.createElement('div'),
			darkBtn = document.createElement('a'),
			lightBtn = document.createElement('a'),
			autoBtn = document.createElement('a'),
			localStorageSwitchKey = 'tool-bar-switch-sytle',
			switchStyle = {
				dark: () => {
					document.documentElement.style.setProperty('--theme-palette-color-1', '#a88b71')
					document.documentElement.style.setProperty('--theme-palette-color-2', '#b59477')
					document.documentElement.style.setProperty('--theme-palette-color-3', '#997d65')
					document.documentElement.style.setProperty('--theme-palette-color-4', '#a88b71')
					document.documentElement.style.setProperty('--theme-palette-color-5', '#473931')
					document.documentElement.style.setProperty('--theme-palette-color-6', '#0e0a0a')
					document.documentElement.style.setProperty('--theme-palette-color-7', '#160908')
					document.documentElement.style.setProperty('--theme-palette-color-8', '#230e0d')
					document.documentElement.style.setProperty('--theme-palette-color-9', 'rgba(13, 9, 9, 0.84)')
					document.documentElement.style.setProperty('--theme-palette-color-10', '#0e0a0a')
				},
				light: () => {
					document.documentElement.style.removeProperty('--theme-palette-color-1')
					document.documentElement.style.removeProperty('--theme-palette-color-2')
					document.documentElement.style.removeProperty('--theme-palette-color-3')
					document.documentElement.style.removeProperty('--theme-palette-color-4')
					document.documentElement.style.removeProperty('--theme-palette-color-5')
					document.documentElement.style.removeProperty('--theme-palette-color-6')
					document.documentElement.style.removeProperty('--theme-palette-color-7')
					document.documentElement.style.removeProperty('--theme-palette-color-8')
					document.documentElement.style.removeProperty('--theme-palette-color-9')
					document.documentElement.style.removeProperty('--theme-palette-color-10')
				}
			},
			switchElement = (style) => {
				currentStyle = style
				localStorage.setItem(localStorageSwitchKey, style)
				const activeBox = box.querySelector('.active')
				activeBox ? activeBox.classList.remove('active') : ''
			},
			switchDark = () => {
				switchElement('dark')
				darkBtn.classList.add('active')
				switchStyle.dark()
				if (clientWidth <= 576) {
					// darkBtn.style.display = 'none'
					// lightBtn.style.display = 'block'
				}
			},
			switchLight = () => {
				switchElement('light')
				lightBtn.classList.add('active')
				switchStyle.light()
				if (clientWidth <= 576) {
					// lightBtn.style.display = 'none'
					// darkBtn.style.display = 'block'
				}
			},
			switchAuto = () => {
				switchElement('auto')
				autoBtn.classList.add('active')
				// 查询媒体
				if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
					// 暗黑模式
					switchStyle.dark()
				} else {
					// 非暗黑模式
					switchStyle.light()
				}
			},
			initStyle = () => {
				currentStyle = localStorage.getItem(localStorageSwitchKey)
				if (clientWidth <= 576 && currentStyle === 'auto') {
					currentStyle = 'light'
				}

				switch (currentStyle) {
					case 'dark':
						switchDark()
						break;
					case 'light':
						switchLight()
						break;
					default:
						switchAuto()
						break;
				}
			}

		box.classList.add('switch-style')

		darkBtn.classList.add('dark', 'button-box')
		darkBtn.innerHTML = darkIcon
		box.appendChild(darkBtn)

		lightBtn.classList.add('light', 'button-box')
		lightBtn.innerHTML = lightIcon
		box.appendChild(lightBtn)

		autoBtn.classList.add('auto', 'button-box')
		autoBtn.innerHTML = autoIcon
		box.appendChild(autoBtn)

		darkBtn.addEventListener('click', () => {
			switchDark()
		})

		lightBtn.addEventListener('click', () => {
			switchLight()
		})

		autoBtn.addEventListener('click', () => {
			switchAuto()
		})

		return { box, initStyle }
	},
	commentsBubble = () => {
		const commentsArea = document.querySelector('.comments-area')
		if (!commentsArea) return
		const commentIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-square-text-fill" viewBox="0 0 16 16">  <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.5a1 1 0 0 0-.8.4l-1.9 2.533a1 1 0 0 1-1.6 0L5.3 12.4a1 1 0 0 0-.8-.4H2a2 2 0 0 1-2-2V2zm3.5 1a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1h-9zm0 2.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1h-9zm0 2.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5z"/> </svg>',
			box = document.createElement('div'),
			messageBox = document.createElement('div'),
			bubbleBox = document.createElement('a'),
			timeoutShow = setTimeout(() => {
				messageBox.classList.add('show')
			}, 15000),
			timeoutHide = setTimeout(() => {
				messageBox.classList.remove('show')
			}, 35000),
			clearAndHide = () => {
				clearTimeout(timeoutShow)
				clearTimeout(timeoutHide)
				messageBox.classList.remove('show')
				const box = document.querySelector('.content-toc')
				if (box && clientWidth <= 576) {
					tocCurrentState = 0
					box.classList.add('less')
					box.classList.remove('spread')
				}
			},
			toCommentsArea = () => {
				document.querySelector('#wpd-editor-0_0 .ql-editor').focus()
				messageBox.classList.remove('show')
				clearAndHide()
			}

		box.classList.add('comments-bubble')

		messageBox.classList.add('message')
		messageBox.innerHTML = '希望看到您的想法，邀您发表评论。'
		box.appendChild(messageBox)

		bubbleBox.classList.add('button-box')
		bubbleBox.innerHTML = commentIcon
		box.appendChild(bubbleBox)

		messageBox.addEventListener('click', () => {
			toCommentsArea()
		})

		bubbleBox.addEventListener('click', () => {
			toCommentsArea()
		})

		box.addEventListener("mouseover", () => {
			messageBox.classList.add('show')
		})

		box.addEventListener("mouseout", () => {
			messageBox.classList.remove('show')
		})



		document.querySelector('.wpd-form-wrap').addEventListener('click', e => {
			if (e.target.className === 'ql-editor ql-blank') {
				clearAndHide()
			}
		})

		document.querySelector('.wpd-thread-list').addEventListener('click', e => {
			if (e.target.className === 'wpd-reply-button') {
				clearAndHide()
			}
		})

		const loadMoreBtn = document.querySelector('.wpd-load-more-submit')
		if (loadMoreBtn) {
			loadMoreBtn.addEventListener('click', () => {
				loadMoreBtn.classList.add('wpd-loading')
				setTimeout(() => {
					loadMoreBtn.classList.remove('wpd-loading')
				}, 10000)
			})
		}

		return box
	},
	toolBar = () => {
		const box = document.createElement('div'),
			switchObj = switchStyle()

		box.classList.add('tool-bar')

		switchObj.initStyle()

		document.addEventListener("DOMContentLoaded", () => {
			const
				toc = contentToc(),
				commentsBubbleBox = commentsBubble()

			if (toc !== undefined) box.appendChild(toc.box)
			if (commentsBubbleBox) box.appendChild(commentsBubbleBox)

			box.appendChild(switchObj.box)
			box.appendChild(backToTop())

			document.querySelector('body').appendChild(box)
		})

		let scrollTop1 = document.documentElement.scrollTop, scrollTop2, boxShow = 1
		document.addEventListener("scroll", () => {
			scrollTop2 = document.documentElement.scrollTop
			if (scrollTop1 > scrollTop2) {
				if (boxShow === 0) {
					boxShow = 1
					box.classList.remove('hide')
				}
			} else {
				if (boxShow === 1) {
					boxShow = 0
					box.classList.add('hide')
				}
			}
			scrollTop1 = scrollTop2
		})
	}

toolBar()

document.addEventListener("DOMContentLoaded", () => {
	// codeHighlight()
})